<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component {
        state = {
            num: 1
        }
        render() {
            console.log("app->render")
            return (
                <div>
                    <button onClick={() => {
                        this.setState({
                            num: this.state.num + 1
                        })
                    }}>{this.state.num}</button>
                    <Child num={this.state.num}></Child>
                </div>
            )
        }
    }
    class Child extends React.Component {
        // state只能在第一次渲染时接收到父组件传来的参数，设置初始值
        // 后续更新页面不调用constrator函数，所以state值不会更新
        state = {
            num: this.props.num
        }
        // 将要接收props前（可以获取到将要接收的参数）
        UNSAFE_componentWillReceiveProps(nextProps) {
            // 接收到的参数是最新的props，但是此函数中的this.props还是未更新的
            // 该钩子函数执行时，属性还未更新
            console.log('1-UNSAFE_componentWillReceiveProps',
                ' nextProps.num:', nextProps.num,
                ' this.state.num:', this.state.num
            )
        }
        // 将要接收props前（可以根据返回值（布尔值）决定是否渲染界面）
        shouldComponentUpdate(nextProps) {
            console.log('2-shouldComponentUpdate',
                ' nextProps.num:', nextProps.num,
                ' this.state.num:', this.state.num
            )
            return true
        }
        // 更新页面之前执行
        UNSAFE_componentWillUpdate(nextProps) {
            console.log('3-UNSAFE_componentWillUpdata',
                ' nextProps.num:', nextProps.num,
                ' this.state.num:', this.state.num
            )
        }


        render() {
            return (
                <div>
                    <h3>Child:this.props.num:{this.props.num}</h3>
                    <h3>Child:this.state.num:{this.state.num}</h3>
                </div>
            )

        }
        componentDidUpdate(prevProps){
            console.log("5-componentDidUpdate",prevProps.num,this.props.num);
        }
    }






    root.render(<App />)
</script>

</html>